Виджеты. Color Border

➡️ Скачать презентацию. Flutter Color Border
➡️ Ссылка на репозиторий с кодом этого урока

Границы контейнера

• В папку widgets добавим файл border_widget.dart
• В файле создадим виджет BorderExample()
• В файле main.dart не забудьте передать BorderExample() в body 

Свойство контейнера border 

Border.all() → устанавливает со всех сторон границы.
Можно передать необязательные параметры толщины рамки и её цвета.

Border.all(width: 2.0, color: const Color(0xFFFFFFFF))

Border.symmetric() → по аналогии выше, можно указать границы для симметричных/параллельных сторон

Border.symmetric(horizontal: BorderSide(width: 1.0, color: Colors.red))

Файл border_widget.dart

import 'package:flutter/material.dart';

class BorderExample extends StatelessWidget {
  final double width, height;

  const BorderExample({
    super.key,
    this.width = 240,
    this.height = 320,
  });

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
          color: Colors.red[50],

          // Границы со всех сторон
          border: Border.all(
            width: 3.0,
            color: const Color(0xFFFF2343),
          ),
          
        ),
      ),
    );
  }
}

                  

Можно через обычный конструктор, задавать значение для каждой стороны.
Через класс BorderSide указывать также толщину и цвет

Файл border_widget.dart

class BorderExample2 extends StatelessWidget {
  final double width, height;

  const BorderExample2({
    super.key,
    this.width = 240,
    this.height = 320,
  });

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
        border: Border(
        top: BorderSide(width: 5.0, color: Color.fromARGB(255, 255, 101, 101)),
        left: BorderSide(width: 15.0, color: Color.fromARGB(255, 75, 225, 92)),
        right: BorderSide(width: 25.0, color: Color.fromARGB(255, 61, 155, 237)),
        bottom:BorderSide(width: 35.0, color: Color.fromARGB(255, 0, 0, 0)),
        ),
        ),
      ),
    );
  }
}